<template>
	<view>
		<view class="page">
			<!-- 顶部蓝色背景 -->
			<view class="re-top"></view>

			<!-- 选择维修方式部分 -->
			<view class="blue">
				<view class="selectMethod">
					<view>维修方式</view>
					<!-- 表单单选框 -->
					<view>
						<radio-group @change="getValue" v-model="selectedValue">
							<label class="radio-container" v-for="(item, index) in radioOptions" :key="index">
								<radio style="transform:scale(0.8);" :value="item.value">{{ item.label }}</radio>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<view class="formBox">
				<view class="userInfo">
					<view class="text">客户信息</view>
					<view class="infoFlex">
						<view class="uni-input-text">车主姓名</view>
						<input type="text" placeholder="请输入车主姓名" v-model="formData.name" />
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">联系方式</view>
						<input type="text" placeholder="请输入联系方式" v-model="formData.phone" />
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">预约时间</view>
						<view class="datePicker" @click="showTimePopup">
							<view>{{ selectedTime || '请选择预约时间' }}</view>
						</view>
					</view>
					<view v-show="isShow" class="infoFlex">
						<view class="uni-input-text">取车位置</view>
						<input type="text" placeholder="请输入取车位置" v-model="formData.address" />
					</view>
				</view>

				<view class="carInfo">
					<view class="text">车辆信息</view>
					<view class="infoFlex">
						<view class="uni-input-text">车辆类型</view>
						<!-- 使用 picker 组件 -->
						<view class="picker">
							<picker mode="selector" :range="vehicleBrands" @change="onVehicleBrandChange">
								{{ formData.type || '请选择车辆类型' }}
							</picker>
						</view>
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">车牌号</view>
						<input type="text" placeholder="请输入车牌号" v-model="formData.carId" />
					</view>
				</view>

				<view class="picture">
					<view class="text">照片</view>
					<view>
						<text>整车照片：</text>
						<uni-file-picker v-model="totalCar" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @success="success" @fail="fail" />
					</view>
					<view>
						<text>维修部位照片</text>
						<uni-file-picker v-model="partCar" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @success="success" @fail="fail" />
					</view>
				</view>
				<!-- 提交按钮 -->
				<view class="bottomBtn" @click="submit">
					提交
				</view>
			</view>

		</view>
		<!-- ------------------------------------------- -->
		<uni-popup ref="timePopup" type="bottom">
			<view class="time-picker-popup">
				<view class="popup-header">
					<text class="cancel" @click="closePopup">取消</text>
					<text class="title">选择预约时间</text>
					<text class="confirm" @click="confirmTime">确定</text>
				</view>

				<scroll-view class="date-list" scroll-x>
					<view class="date-item" v-for="(date, index) in dateList" :key="index"
						:class="{ active: selectedDate === date.date }" @click="selectDate(date)">
						<text class="day">{{ date.day }}</text>
						<text class="date">{{ date.date }}</text>
					</view>
				</scroll-view>

				<view class="time-list">
					<view class="time-item" v-for="(time, index) in timeList" :key="index" :class="{ 
		              active: selectedTime === time.value,
		              disabled: time.disabled 
		            }" @click="selectTime(time)">
						<text>{{ time.label }}</text>
						<text class="status">{{ time.disabled ? '不可预约' : '可约' }}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!----------------------------------------- -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//-----------------------------------------------
				selectedDate: '',
				selectedTime: '',
				dateList: [],
				timeList: [{
						label: '09:00-10:00',
						value: '09:00-10:00',
						disabled: false
					},
					{
						label: '10:00-11:00',
						value: '10:00-11:00',
						disabled: false
					},
					{
						label: '11:00-12:00',
						value: '11:00-12:00',
						disabled: false
					},
					{
						label: '14:00-15:00',
						value: '14:00-15:00',
						disabled: false
					},
					{
						label: '15:00-16:00',
						value: '15:00-16:00',
						disabled: false
					},
					{
						label: '16:00-17:00',
						value: '16:00-17:00',
						disabled: false
					},
					{
						label: '17:00-18:00',
						value: '17:00-18:00',
						disabled: false
					}
				],
				//-----------------------------------------------

				//整车图片
				totalCar: [],
				//维修部位图片
				partCar: [],

				// 表单数据
				formData: {
					name: '',
					phone: '',
					address: '',
					carId: '',
					dateTime: '',
					type: ''
				},
				// 控制部分标签的显示与隐藏
				isShow: false,

				// 单选框部分
				selectedValue: '',
				radioOptions: [{
						label: '到店维修',
						value: 'r1'
					},
					{
						label: '上门取车',
						value: 'r2'
					}
				],

				//车辆品牌列表
				vehicleBrands: [
					"红旗","柯尼塞格","迈巴赫","保时捷","斯柯达","xiaomi su7 Utral",
					'丰田', '本田', '福特', '宝马', '奔驰', '奥迪', '日产', '雪佛兰', '大众', '马自达',
					'雷克萨斯', '凯迪拉克', '沃尔沃', '斯巴鲁', '铃木', '吉利', '长安', '比亚迪', '奇瑞', '广汽'
				],

				//是否勾选维修方式
				isChoose: '',
				
			}
		},
		mounted() {
			this.initDateList();
		},
		methods: {
			getValue(e) {
				this.isChoose = e.detail.value;
				this.isShow = e.detail.value !== 'r1';
			},

			//-------------预约---------------------
			formatDate(date) {
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${month}月${day}日`;
			},
			initDateList() {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const list = [];

				for (let i = 0; i < 7; i++) {
					const date = new Date();
					date.setDate(date.getDate() + i);
					list.push({
						date: this.formatDate(date),
						day: days[date.getDay()],
						timestamp: date.getTime()
					});
				}

				this.dateList = list;
				this.selectedDate = list[0].date;

				// 更新时间列表的可用性
				this.updateTimeList();
			},

			updateTimeList() {
				const now = new Date();
				const currentTime = now.getTime(); // 当前时间的时间戳

				this.timeList.forEach(time => {
					const [startHour, startMinute] = time.value.split('-')[0].split(':').map(Number); // 获取时段的开始时间
					const timeStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour,
						startMinute).getTime(); // 开始时间的时间戳
					const timeEnd = timeStart + 60 * 60 * 1000; // 结束时间为开始时间加1小时

					if (this.selectedDate === this.formatDate(now)) {
						// 如果是今天，检查当前时间是否超过时段的结束时间
						time.disabled = currentTime >= timeEnd; // 超过结束时间则禁用
					} else {
						// 如果是明天或之后的日期，时间可用
						time.disabled = false;
					}
				});
			},

			showTimePopup() {
				this.$refs.timePopup.open();
				this.selectedTime = "";
			},

			closePopup() {
				this.$refs.timePopup.close();
			},

			selectDate(date) {
				this.selectedDate = date.date;
				this.updateTimeList(); // 更新时间列表
			},

			selectTime(time) {
				if (time.disabled) return;
				this.selectedTime = time.value;
			},

			confirmTime() {
				if (!this.selectedTime) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					});
					return;
				}

				this.selectedTime = `${this.selectedDate} ${this.selectedTime}`;
				this.closePopup();
			},

			onVehicleBrandChange(e) {
				this.formData.type = this.vehicleBrands[e.detail.value]; // 更新车辆类型
			},

			submit() {
				if (!this.isChoose) {
					uni.showToast({
						title: '请勾选维修方式',
						icon: 'error',
						duration: 2000,
					});
				} else {
					this.formData.dateTime = this.selectedTime
					console.log(this.formData);
					
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/maintenance/nearStore/storeDetail/reservation/reservationSuccess/reservationSuccess",
							animationType: 'pop-in',
							animationDuration: 2000
						});
					}, 1500);
				}
			}
		}
	}
</script>

<style>
	.page {
		background-color: #F5F5F5;
	}

	.re-top {
		width: 750rpx;
		height: 350rpx;
		background-color: #1E90FF;
		position: fixed;
	}

	.blue {
		width: 100%;
		height: 150rpx;
		background-color: #1E90FF;
		position: fixed;
		z-index: 2;
	}

	.selectMethod {
		width: 90%;
		padding: 0 20rpx 0 20rpx;
		height: 120rpx;
		background-color: white;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 120rpx;
	}

	.radio-container {
		margin-left: 20rpx;
	}

	.formBox {
		width: 95%;
		left: 0;
		right: 0;
		margin: auto;
		height: 1300rpx;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
		position: absolute;
		top: 150rpx;
		z-index: 1;
		border-radius: 30rpx;
	}

	.userInfo {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 20rpx;
		border-radius: 30rpx;
	}

	.carInfo {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 20rpx;
		margin: 20rpx auto;
		border-radius: 30rpx;
	}

	.picture {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 30rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.bottomBtn {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		border-radius: 30rpx;
		background-color: #1E90FF;
		margin-bottom: 20rpx;
		margin: 30rpx auto;
	}

	.userInfo .text,
	.carInfo .text,
	.picture .text {
		width: 98%;
		height: 80rpx;
		background-color: white;
		margin: 10rpx auto;
		padding: 0 10rpx 0 5rpx;
		line-height: 80rpx;
		border-bottom: 2px solid #F5F5F5;
	}

	.infoFlex {
		display: flex;
		justify-content: space-around;
		margin-top: 25rpx;
		background-color: white;
	}

	.infoFlex>view {
		width: 30%;
		background-color: #1E90FF;
		text-align: center;
		border-radius: 35rpx;
		font-size: 12px;
		color: white;
		height: 74rpx;
		line-height: 74rpx;
	}

	.infoFlex>input {
		width: 60%;
		padding-left: 4%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 12px;
		border-radius: 35rpx;
		border: 2rpx solid #F5F5F5;
	}

	/* 自定义日期时间选择器样式 */
	.infoFlex .datePicker {
		width: 60%;
		padding-left: 4%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: white;
		border: 2rpx solid #F5F5F5;
		border-radius: 35rpx;
		font-size: 12px;
		text-align: left;
		color: #808080;
	}

	/* 下拉选择样式 */
	.infoFlex .picker {
		width: 60%;
		padding-left: 4%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		border: 2rpx solid #F5F5F5;
		font-size: 12px;
		text-align: center;
		color: #808080;
		background-color: white;
		text-align: left;
	}

	/* ----------------------------- */
	.section-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 时间选择弹窗样式 */
	.time-picker-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.popup-header .title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.popup-header .cancel,
	.popup-header .confirm {
		font-size: 28rpx;
		padding: 10rpx;
	}

	.popup-header .confirm {
		color: #2b85ff;
	}

	.date-list {
		padding: 30rpx;
		white-space: nowrap;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.date-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
	}

	.date-item.active {
		background: #2b85ff;
	}

	.date-item .day {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.date-item .date {
		font-size: 28rpx;
		color: #333;
	}

	.date-item.active .day,
	.date-item.active .date {
		color: #fff;
	}

	.time-list {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.time-item {
		width: calc((100% - 40rpx) / 3);
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
	}

	.time-item.active {
		background: #e6f0ff;
		border-color: #2b85ff;
	}

	.time-item.disabled {
		background: #f5f5f5;
		border-color: #eee;
		opacity: 0.6;
	}

	.time-item text {
		font-size: 28rpx;
		color: #333;
	}

	.time-item .status {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.time-item.active text {
		color: #2b85ff;
	}

	.time-item.disabled text {
		color: #999;
	}
</style>